<template>
  <Card dis-hover :bordered="false">
    <Row :gutter="16" type="flex">
      <Col class="ivu-mb-16">
        <DatePicker 
            :editable="false" 
            type="daterange" 
            v-model="timedate" 
            placeholder="请选择日期"
            @on-change="changeDatatime">
        </DatePicker>
      </Col>                                
      <Col class="ivu-mb-16">
        <RadioGroup v-model="timeType" type="button" @on-change="changeTimeType">
            <Radio label="日" value="1"></Radio>
            <Radio label="周" value="2"></Radio>
            <Radio label="月" value="3"></Radio>
        </RadioGroup>
      </Col>
      <Col class="ivu-mb-16">
       <Select
          v-width="120"
          placeholder="代言人"
          v-model="params.spoker_id"
          :filterable="spokerList.length >= 10"
          @on-open-change="showAll"
          @on-change="searchData"
          clearable
        >
          <Option
            v-for="item in spokerList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
      <Col class="ivu-mb-16">
        <Select
          v-width="120"
          placeholder="门店"
          v-model="params.shop_id"
          :filterable="shopList.length >= 10"
          @on-open-change="showAll"
          @on-change="searchData"
          clearable
        >
          <Option
            v-for="item in shopList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
      <Col class="ivu-mb-16">
        <Select
          v-width="120"
          placeholder="状态"
          v-model="params.status"
          @on-clear="searchData"
          @on-change="searchData"
          clearable
        >
          <Option
            v-for="item in statusList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
    </Row>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      @on-sort-change="sortChange"
      :max-height="tableHeigth"
    >
      <template #status="{ row }">
         <Tag type="border" 
        :color="
        row.status == '3'?'error'
        :row.status == '2'?'success'
        :'primary'">{{row.status_name}}</Tag>         
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      :total="total"
      :modelValue="params.current"
      :page-size="params.size"
      :page-size-opts="pageOpts"
      show-total
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changepageSize"
    />    
  </Card>
</template>
<script>
import {
  patientOrderList,
} from "@api/appointment.js";
import dayjs from 'dayjs';
export default {
  name: "appointment",
  data() {
    return {
      tableHeigth: document.body.clientHeight - 270,
      timedate:[],
      timeType: '', 
      params: {
        order_stime:'',
        order_etime:'',
        spoker_id: "",
        shop_id: "",
        status: "",
        current: 1,
        size: 10,
        order_column: "",
        order_sort: "",
      },
      spokerList: [],
      shopList: [],
      statusList: [],
      total: 0,
      pageOpts: [10, 20, 30, 40],
      columns: [
        {
          key: "name",
          title: "客户名称"
        },
        {
          key: "treatment_project",
          title: "项目类型"
        },
        {
          key: "order_time_str",
          title: "预约时间"
        },
        {
          key: "shop_name",
          title: "预约门店"
        },
        
        {
          slot: "status",
          title: "状态"
        },
        {
          key: "spoker_name",
          title: "代言人"
        }
      ],
      list: [],
      loading: false,
      btnLoading: false,
      
    };
  },
  mounted() {
    this.changeTimeType();
  },
  methods: {
    changeDatatime(){
        this.timeType = '';
        this.askDatatime();
    },
    askDatatime() {
        this.params.order_stime = this.timedate[0] ? dayjs(this.timedate[0]).format('YYYY-MM-DD') : '';
        this.params.order_etime = this.timedate[1] ? dayjs(this.timedate[1]).format('YYYY-MM-DD') : '';
        this.getData();
    },
    getLastDayOfNaturalMonth() {//下个月的1号减去1天
      const currentDate = new Date();
      const year = currentDate.getFullYear();//获取当前年
      const month = String(currentDate.getMonth() + 2).padStart(2, "0");//获取当前月
      const firstDay = "01";//1号
      const firstDayOfNextMonth = `${year}-${month}-${firstDay}`;
      const lastDayOfMonth = new Date(new Date(firstDayOfNextMonth).getTime() - 86400000);
      return lastDayOfMonth;
    },
    changeTimeType(){
        const date = new Date();   
        if(this.timeType == '日'){
            this.timedate = [date,date];
        }else if(this.timeType == '周'){
            let before = date.getTime() - 7 * 86400 * 1000;         
            let beforeDate = new Date(before);
            this.timedate = [beforeDate,date];
        }else if(this.timeType == '月'){
            let year = date.getFullYear();  
            let month = date.getMonth() + 1;
            let monthDate = new Date(year + '-' + month + '-1');
            this.timedate = [monthDate,this.getLastDayOfNaturalMonth()];                 
        }
        this.askDatatime();
    },
    showAll(e){
        if(e){
            let downList=document.querySelectorAll('.ivu-select-dropdown-list .ivu-select-item')
            downList.forEach(item => {
                item.style.display='block'
            });
        }  
    },
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData();
    },
    sortChange(e) {
      this.params.order_column = e.key.replace(/_str$/, "");
      this.params.order_sort = e.order;
      this.getData();
    },
    
    getData() {
      this.loading = true;
      const params = {
        order_stime:this.params.order_stime,
        order_etime:this.params.order_etime,
        spoker_id: this.params.spoker_id,
        shop_id: this.params.shop_id,
        status: this.params.status,
        order_column: this.params.order_column,
        order_sort: this.params.order_sort,
        pageSize: this.params.size,
        page: this.params.current,
      };
      patientOrderList(params)
        .then((res) => {
          this.spokerList = res.condition.spoker_arr;
          this.statusList = res.condition.status_arr;
          this.shopList = res.condition.shop_arr;
          this.list = res.list.list;
          this.total = res.list.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    searchData() {
      this.params.current = 1;
      this.getData();
    },
    
  },
};
</script>